import React from 'react';
import Notifications from '@material-ui/icons/Notifications';
import NotificationsNoneOutlined from '@material-ui/icons/NotificationsNoneOutlined';
import IconButton from '@material-ui/core/IconButton';
import DeviceHub from '@material-ui/icons/DeviceHub';
import Avatar from '@material-ui/core/Avatar';
import { makeStyles } from '@material-ui/core/styles';
import { g_style } from '../base/st';
import { Tip } from 'sui';

const useGlobStyle = makeStyles(theme => (g_style));

const FloatTag = ({ pos, x, y }) => {
    const classes = useGlobStyle();

    return (
        <div className="z-50 absolute float-left" style={{ left: x - 30, top: y - 30 }}>
            <Avatar className={classes.deep_blueAvatar}>{pos}</Avatar>
        </div>
    );
};

const AlarmTag = ({ cl="gray", label, type, className, hcmd }) => {
    const Icon = () => {
        if (type === "connect") {
            if (cl === "yellow") {
                return <DeviceHub/>;
            }
            return <DeviceHub style={{ color: "white" }}/>;
        }
        else if (type === "alarm") {
            if (cl === "yellow") {
                return <NotificationsNoneOutlined/>;
            }

            return <Notifications style={{ color: "white" }}/>;
        }
        else {
            return null;
        }
    };

    return (
        <Tip title={label}>
            <div className="my-2 mr-2">
                <IconButton onClick={hcmd} style={{ backgroundColor: cl, padding: "6px" }}>
                    <Icon/>
                </IconButton>
            </div>
        </Tip>
    );
};

export {AlarmTag, FloatTag};
